<template>
  <div class="container">
    <el-row>
      <el-col :span="4">
        <div class="left">
          <a target="_blank" href="//www.bilibili.com/video/BV1HV4y1U7ji/" class="cover-wrp">
            <img
              src="//i1.hdslb.com/bfs/archive/4d392b4979679fd474e05666ba361e64ddb8ade0.jpg@320w_200h"
              alt="是肾透支了吗！！？"
              class="cover-img"
            />
            <div class="duration">00:23</div>
          </a>
        </div>
      </el-col>
      <el-col :span="20">
        <div class="right">
          <ul>
            <li>
              <div class="meta-title">
                <a
                  target="_blank"
                  href="//www.bilibili.com/video/BV1HV4y1U7ji/"
                  class="video-title"
                >是肾透支了吗！！？</a>
              </div>
            </li>
            <li style="font-size: 14px;padding-top:12px">
              <el-row :gutter="20">
                <el-col :span="14" >
                  <div>
                    <span class="date">2023年06月06日 04:37:57</span>
                  </div>
                </el-col>
              
                <el-col :span="6" style="float:right">
                  <div>
                    <el-button size="mini" type="primary" plain>
                      <i class="el-icon-edit"></i>编辑
                    </el-button>
                    <el-button size="mini" type="primary" plain>
                      <i class="el-icon-s-data"></i> 数据
                    </el-button>
                    <el-button size="mini">
                      <i class="el-icon-delete-solid"></i>
                    </el-button>
                  </div>
                </el-col>
              </el-row>
            </li>
            <li>
              <div>
                <ul class="data-icon">
                  <li>
                    <div title="浏览" class="view-stat">
                      <img
                        width="16px"
                        height="16px"
                        src="https://s1.hdslb.com/bfs/templar/york-static/lp4R9JrVm7Xk63vy.png"
                      />
                      <span class="icon-text">189</span>
                    </div>
                  </li>
                  <li>
                    <div title="点赞" class="view-stat">
                      <img
                        width="16px"
                        height="16px"
                        src="https://s1.hdslb.com/bfs/templar/york-static/wOdLWtIVZ2XE9vNZ.png"
                      />
                      <span class="icon-text">6</span>
                    </div>
                  </li>
                
                  <li>
                    <div title="评论" class="view-stat">
                      <img
                        width="16px"
                        height="16px"
                        src="https://s1.hdslb.com/bfs/templar/york-static/IuXtxcG3v5O8to0K.png"
                      />
                      <span class="icon-text">2</span>
                    </div>
                  </li>
                  <li>
                    <div title="硬币" class="view-stat">
                      <img
                        width="16px"
                        height="16px"
                        src="https://s1.hdslb.com/bfs/templar/york-static/QUYSPlIn2NJpI6TB.png"
                      />
                      <span class="icon-text">0</span>
                    </div>
                  </li>
                  <li>
                    <div title="收藏" class="view-stat">
                      <img
                        width="16px"
                        height="16px"
                        src="https://s1.hdslb.com/bfs/templar/york-static/RPCS9YBWZUQgypok.png"
                      />
                      <span class="icon-text">0</span>
                    </div>
                  </li>
                  <li>
                    <div title="分享" class="view-stat">
                      <img
                        width="16px"
                        height="16px"
                        src="https://s1.hdslb.com/bfs/templar/york-static/929bYp7TSIAecSPG.png"
                      />
                      <span class="icon-text">0</span>
                    </div>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
        <el-divider></el-divider>
        
  </div>
</template>

<script>
export default {
  name: "uploadmanagearticle",
  data() {
    return {};
  }
};
</script>
<style   scoped>
.container {
  align-content: center;
  padding: 10px;

}
.data-icon li {
  align-content: center;
  padding: 12px;
  color: blue;
  float: left;
}
.video-title {
  font-size: 19px;
}
.left{
    width:80%;
    height: 110px;
    border: solid 1px red;
}
</style>




